<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>12_语法-v-memo(备忘录)指令使用</title>
  <!-- 
  在 Vue 3 中， `v-memo`  指令用于优化组件的渲染性能。它允许开发者在组件中标记某些部分，以便在依赖数据未变化时跳过重新渲染。这种优化可以减少不必要的计算和 DOM 操作，从而提高应用的性能。
  1. 基本用法
  `v-memo`  指令的基本语法如下：
  <template>
    <div>
      <p v-memo="[someDependency]">{{ computedValue }}</p>
    </div>
  </template>

  <script>
  export default {
    setup() {
      const someDependency = ref(0);
      const computedValue = computed(() => {
        // 计算逻辑
        return someDependency.value * 2;
      });

      return {
        someDependency,
        computedValue,
      };
    },
  };
  </script>
  在这个例子中， `v-memo`  指令将  `someDependency`  作为依赖项传递。如果  `someDependency`  的值没有变化，Vue 将跳过对  `<p>`  元素的重新渲染。

  2. 适用场景
  - 性能优化：当组件中有复杂的计算或渲染逻辑时，可以使用  `v-memo`  来避免不必要的更新，从而提高性能。
  - 静态内容：对于某些内容在特定条件下不需要重新渲染的部分， `v-memo`  可以帮助减少计算和 DOM 操作。

  3. 注意事项
  - 依赖管理：确保传递给  `v-memo`  的依赖项是正确的，以便 Vue 能够准确判断何时重新渲染。
  - 与其他优化结合使用： `v-memo`  可以与其他性能优化技术（如  `v-once` 、 `computed`  属性等）结合使用，以实现更好的性能效果。

  4. 总结
  -  `v-memo`  指令：用于优化组件的渲染性能，允许开发者标记某些部分以跳过不必要的重新渲染。
  - 适用场景：适合复杂计算和静态内容的性能优化。
  - 依赖管理：确保依赖项的正确性，以便准确判断何时重新渲染。
  -->
</head>
<body>

  <div id="app">
    <div v-memo="[someDependency, computedValue]">
      <div>{{ someDependency }}</div>
      <p >{{ computedValue }}</p>
    </div>
    <button @click="updateInfo">改变信息</button>
  </div>

  <script src="../lib/vue.js"></script>
  <script>
    const { createApp, ref, computed } = Vue

    createApp({
      setup() {
        const someDependency = ref(0)
        const computedValue = computed(() => {
          // 计算逻辑
          return someDependency.value * 2
        })

        const updateInfo = () => {
          someDependency.value++
        }

        return {
          someDependency,
          computedValue,
          updateInfo,
        }
      },
    }).mount('#app')
  </script>

  
</body>
</html>